import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import { getLogin } from '../../axios/use';
import { useDispatch } from 'react-redux';
import { useLogin } from '../../store/slice/ticket';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.css'
import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
const Index = () => {
    const nav = useNavigate()
    const Dispatch = useDispatch()
    const onFinish = async (values) => {
        console.log('Success:', values);
        const { account, password } = values
        const res = await getLogin({ account, password })
        localStorage.setItem('token', res.token)
        localStorage.setItem('username', res.username)
        localStorage.setItem('userId', res.userId)
        Dispatch(useLogin(res))
        nav('/home')
        console.log(res);

    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className={styles.box}>

            <div className={styles.box1}>
                <div style={{ textAlign: 'center' }}><h1>react-ant-admin</h1><p>欢迎使用，请先登录</p></div>
                <Form
                    name="basic"
                    // labelCol={{ span: 8 }}
                    // wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label=""

                        name="account"
                        rules={[{ required: true, message: '请输入账号!' }]}
                    >
                        <Input placeholder="admin" prefix={<UserOutlined />} />

                    </Form.Item>

                    <Form.Item
                        label=""
                        name="password"
                        rules={[{
                            required: true,
                            message: '请输入6-12位密码!',
                
                        }]}
                    >
                        <Input.Password placeholder="密码:admin123/user123" prefix={<UnlockOutlined />} />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" label={null}>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item label={null} style={{ textAlign: 'center' }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                        <Button>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Index
